#レーダーチャート

レーダー チャートは、複数のデータ ポイントとそれらの間の変化を表示する方法です。

多くの場合、2 つ以上の異なるデータ セットのポイントを比較するのに役立ちます。

const config = {
  type: 'radar',
  data: data,
  options: {
    elements: {
      line: {
        borderWidth: 3
      }
    }
  },
};

const data = {
  labels: [
    'Eating',
    'Drinking',
    'Sleeping',
    'Designing',
    'Coding',
    'Cycling',
    'Running'
  ],
  datasets: [{
    label: 'My First Dataset',
    data: [65, 59, 90, 81, 56, 55, 40],
    fill: true,
    backgroundColor: 'rgba(255, 99, 132, 0.2)',
    borderColor: 'rgb(255, 99, 132)',
    pointBackgroundColor: 'rgb(255, 99, 132)',
    pointBorderColor: '#fff',
    pointHoverBackgroundColor: '#fff',
    pointHoverBorderColor: 'rgb(255, 99, 132)'
  }, {
    label: 'My Second Dataset',
    data: [28, 48, 40, 19, 96, 27, 100],
    fill: true,
    backgroundColor: 'rgba(54, 162, 235, 0.2)',
    borderColor: 'rgb(54, 162, 235)',
    pointBackgroundColor: 'rgb(54, 162, 235)',
    pointBorderColor: '#fff',
    pointHoverBackgroundColor: '#fff',
    pointHoverBorderColor: 'rgb(54, 162, 235)'
  }]
};

#データセットのプロパティ

名前空間:

• data.datasets[index]- このデータセットのみのオプション
• options.datasets.line- すべてのライン データセットのオプション
• options.elements.line- すべてのオプション線要素
• options.elements.point- すべてのオプション点要素
• options- チャート全体のオプション

レーダー チャートでは、データセットごとに多くのプロパティを指定できます。これらは、特定のデータセットの表示プロパティを設定するために使用されます。たとえば、線の色は一般的にこのように設定されます。

これらすべての値がundefined、で説明されているスコープにフォールバックします。オプションの解決策

#全般的

#ポイントスタイリング

各ポイントのスタイルは、次のプロパティで制御できます。

これらすべての値がundefined、最初にデータセット オプションにフォールバックし、次に関連するオプションにフォールバックします。elements.point.*オプション。

#ラインのスタイリング

線のスタイルは、次のプロパティで制御できます。

値がundefined、値は関連付けられた値にフォールバックされます。elements.line.*オプション。

#インタラクション

各ポイントとの相互作用は、次のプロパティで制御できます。

#スケールオプション

レーダー チャートは 1 つのスケールのみをサポートします。このスケールのオプションは、scales.rプロパティから参照できます。リニアラジアル軸ページ。

options = {
    scales: {
        r: {
            angleLines: {
                display: false
            },
            suggestedMin: 50,
            suggestedMax: 100
        }
    }
};

#デフォルトのオプション

作成されたすべてのレーダー チャートに構成設定を適用することが一般的です。グローバルレーダーチャート設定は次の場所に保存されます。Chart.overrides.radar。グローバル オプションを変更すると、変更後に作成されたグラフにのみ影響します。既存のチャートは変更されません。

#データ構造

のdataレーダー チャートのデータセットのプロパティは、数値の配列として指定されます。データ配列内の各点は、同じインデックスのラベルに対応します。

data: [20, 10]

レーダー チャートの場合、各ポイントが意味するコンテキストを提供するために、チャート内の各ポイントの周囲を示す文字列の配列が含まれます。

data: {
    labels: ['Running', 'Swimming', 'Eating', 'Cycling'],
    datasets: [{
        data: [20, 10, 4, 2]
    }]
}

#内部データ形式

{x, y}